<template>
  <div style="margin-top: 50px">
    <!--翻牌子机会数-->
    <div class="title">可抽奖<label id="count">{{ count }}</label>次</div>

    <div class="box">
      <div v-for="(item,index) in list" :key="index">
        <div :class="'item'"  @click="itemClick(item,index)">
          <!--card1 抽奖面 item.status 0 时未翻牌子 1选中的样式  2机会用了的未选中样式>-->
          <div :class="(item.status > 0) ? 'card1 hide' : 'card1' ">
            <template v-if="(item.status > 0)">{{item.name}}</template>
            <template v-else>抽奖</template>
          </div>
          <!--card2 奖品面-->
          <div :class="{'card2 show':item.status == 1 , //选中的样式
                        'card2':item.status == 0,  //未选中的样式
                        'card2 show-result':item.status == 2} //机会用了的未选中样式
                      ">
            {{item.name}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted} from "vue";
// 抽奖次数
let count = ref(3)
const  list = ref([
  { id: 1, name: '1元猫超卡', is: true ,status:0 },  // 0未选 1选择的 2机会用了了但是未选中的
  { id: 2, name: '3元猫超卡', is: true ,status:0 },
  { id: 3, name: '谢谢惠顾',status:0},
  { id: 4, name: '谢谢惠顾',status:0 },
  { id: 5, name: '谢谢惠顾',status:0 },
  { id: 6, name: '谢谢惠顾',status:0 },
])
onMounted(()=> {
  // 奖品列表
  list.value = list.value.sort(v => Math.random() - 0.5)
})

function  itemClick(item,index){
  if(count.value <= 0 || item.status == 2){
    return
  }
  item.status = 1
  count.value = count.value -1
  if(count.value == 0){
    list.value.forEach(item=>{
      if( item.status != 1){
        item.status = 2
      }
    })
  }
}

</script>

<style scoped >
.title {
  text-align: center;
}
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 330px;
  margin: 0 auto;
}

.item {
  position: relative;
  margin: 5px;
  width: 100px;
  height: 100px;
}

.card1,
.card2 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  text-align: center;
  transition: transform .4s
}

.card1 {
  background-color: #ff8800;
  color: #fff;
}

.card2 {
  color: #ff8800;
  border: 1px solid #ff8800;
  padding: 0 10px;
  transform: scaleX(0);
  background-color: #ffe6c9;
}

.hide {
  transform: scaleX(0);
}

.show {
  transform: scaleX(1);
}

.show-result {
  transform: scaleX(1);
  opacity: 0.5;
}

</style>